<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'

  defineOptions({
    name: 'CustomTitle6',
  })

  const props = defineProps({
    title: {
      type: String,
      default: () => '这是标题',
    },
    titleColor: {
      type: String,
      default: () => '#007cff',
    },
    desc: {
      type: String,
      default: () => '',
    },
    dividerColor: {
      type: String,
      default: () => '#007cff',
    },
  })

  const titleStyle = computed<CSSProperties>(() => {
    return {
      color: props.titleColor,
    }
  })

  const lineStyle = computed<CSSProperties>(() => {
    return {
      position: 'absolute',
      bottom: '0',
      right: '0',
      left: '0',
      paddingLeft: '8px',
    }
  })

  const lintContentStyle = computed<CSSProperties>(() => {
    return {
      height: '4px',
      backgroundColor: props.dividerColor,
      width: '100%',
      opacity: '0.2',
    }
  })

  const mainColorBlockStyle = computed<CSSProperties>(() => {
    return {
      backgroundColor: props.dividerColor,
      maxWidth: '81%',
      minWidth: '8%',
      position: 'absolute',
      height: '8px',
      'border-top-right-radius': '8px',
      'border-bottom-left-radius': '8px',
    }
  })
</script>

<template>
  <div class="custom-title6">
    <div class="title" :style="titleStyle">{{ props.title }}</div>
    <div class="divider-container">
      <div class="main-color-block" :style="mainColorBlockStyle"></div>
      <div class="line" :style="lineStyle">
        <div class="ling-bg" :style="lintContentStyle"></div>
      </div>
    </div>
    <div v-if="props.desc" class="desc">{{ props.desc }}</div>
  </div>
</template>

<style scoped lang="scss">
  .custom-title6 {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 8px;

    .divider-container {
      width: 100%;
      position: relative;
      height: 8px;
    }

    .desc {
      color: gray;
    }
  }
</style>
